<template>
  <div class="InspectorAdmin">
    <a-card>
      <a-form :form="form">
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="负责点位" :label-col="{ span: 6 }" :wrapper-col="{ span: 16,offset:1}">
              <a-select v-decorator="['answerPoint']" placeholder="全部">
                <a-select-option value>全部</a-select-option>
                <a-select-option
                  v-for="item in posInfo"
                  :key="item.id"
                  :value="item.id"
                >{{item.posName}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="姓名" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input placeholder="请输入" v-decorator="['name']" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="绑定状态" :label-col="{ span: 6 }" :wrapper-col="{ span: 16,offset:1}">
              <a-select v-decorator="['bindingState']" placeholder="全部">
                <a-select-option value>全部</a-select-option>
                <a-select-option :value="1">已绑定</a-select-option>
                <a-select-option :value="0">未绑定</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="24" :style="{ textAlign: 'right' }">
            <a-button type="primary" @click="search">查询</a-button>
            <a-button type="dashed" @click="listExport">导出</a-button>
            <a-button @click="handleReset()">重置</a-button>
            <a-button
              @click="showModal"
              style="margin-left:2%;background:rgb(0,240,102);color:white"
            >新增</a-button>
            <a-modal title="新增巡柜员" :visible="visible" @ok="handleOk" @cancel="handleCancel">
              <a-form :form="form">
                <a-form-item
                  label="姓名"
                  :label-col="{ span: 4}"
                  :wrapper-col="{ span: 16, offset: 1}"
                >
                  <a-input
                    placeholder="请输入"
                    v-decorator="[
          'addNname',
          {rules: [{ required: true, message: '请输入姓名!' }]}
        ]"
                  />
                </a-form-item>
              </a-form>
            </a-modal>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <a-card style="margin-top:2%;">
      <a-table
        :columns="columns"
        :dataSource="data"
        :pagination="pagination"
        @change="handleTableChange"
        :rowKey="record => record.employeeId"
        :bordered="true"
      >
        <template slot="bindingState" slot-scope="text,record">
          <span>{{record.bindingStatus==0?"未绑定":"已绑定"}}</span>
        </template>
        <template slot="code" slot-scope="text,record">
          <img style="width:100%" :src="record.qrCode" alt />
        </template>
        <template slot="operation" slot-scope="text,record">
          <span class="del" @click="showDeleteConfirm(text,record)">删除</span>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
const columns = [
  {
    title: "序号",
    dataIndex: "employeeId",
    scopedSlots: { customRender: "number" },
    align: "center"
  },
  {
    title: "姓名",
    dataIndex: "name",
    scopedSlots: { customRender: "name" },
    align: "center"
  },
  {
    title: "负责点位",
    dataIndex: "posNames",
    scopedSlots: { customRender: "answerPoint" },
    align: "center"
  },
  {
    title: "绑定状态",
    dataIndex: "bindingStatus",
    scopedSlots: { customRender: "bindingState" },
    align: "center"
  },
  {
    title: "请巡柜员扫码绑定",
    dataIndex: "qrCode",
    scopedSlots: { customRender: "code" },
    align: "center",
    width: "15%"
  },
  {
    title: "绑定密码",
    dataIndex: "bindingCode",
    scopedSlots: { customRender: "bindPassword" },
    align: "center"
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    scopedSlots: { customRender: "creationTime" },
    align: "center"
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" },
    align: "center"
  }
];
export default {
  name: "InspectorAdmin",
  data() {
    return {
      form: this.$form.createForm(this),
      data: [],
      columns,
      pagination: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["10", "20", "30", "40"], //每页条数选择器
        showTotal: (total, range) => {
          return `${range[0]}-${range[1]} 共${total}条`;
        }, // 总数展示
        pageSize: 10, //每页条数
        defaultCurrent: 1, //默认当前页
        current: 1, //当前页
        total: 50 //数据总条数
      },
      visible: false,
      posInfo: []
    };
  },
  watch: {},
  computed: {},
  methods: {
    handleReset() {
      this.form.resetFields();
    },
    handleTableChange(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      pager.total = pagination.total;
      this.pagination = pager;
      this.handleReset();
      this.search();
    },
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      this.add();
      this.visible = false;
    },
    handleCancel(e) {
      console.log("取消");
      this.visible = false;
    },
    showDeleteConfirm(text, record) {
      var that = this;
      this.delId = record.employeeId;
      this.$confirm({
        title: "删除巡柜员",
        content: "您确定要删除这个巡柜员吗？",
        okText: "确定",
        cancelText: "取消",
        iconType: "close-circle",
        onOk() {
          that.delete(that.delId);
          console.log("确定");
        },
        onCancel() {
          console.log("取消");
        }
      });
    },

    // 查询该代理商下所有的点位信息
    findAll() {
      this.axios
        .post(this.baseUrl + "/pos/findAll", {
          loginToken: this.$store.state.loginToken
        })
        .then(response => {
          console.log(response);
          this.posInfo = response.data.data;
        });
    },

    // 新建巡柜员
    add() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/employee/add", {
          loginToken: this.$store.state.loginToken,
          name: values.addNname
        })
        .then(response => {
          // console.log(response);
          if (response.data.code == 0) {
            this.search();
            this.$message.info("新增巡柜员成功");
          }
          if (response.data.code !== 0) {
            this.$message.info(response.data.code);
          }
        });
    },

    // 搜索巡柜员
    search() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/employee/search", {
          loginToken: this.$store.state.loginToken,
          name: values.name,
          bindingStatus: values.bindingState,
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize,
          posId: values.answerPoint
        })
        .then(response => {
          // console.log(response);
          this.data = response.data.data.list;
          this.pagination.total = response.data.data.total;
          this.pagination.pageSize = response.data.data.pageSize;
          this.pagination.current = response.data.data.pageNum;
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 删除巡柜员
    delete(id) {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/employee/delete", {
          loginToken: this.$store.state.loginToken,
          employeeId: id
        })
        .then(response => {
          // console.log(response);
          if (response.data.code == 0) {
            this.search();
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 巡柜员导出
    listExport() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(
          this.baseUrl + "/employee/export",
          {
            bindingStatus: values.bindingState,
            name: values.name,
            posId: values.answerPoint,
            loginToken: this.$store.state.loginToken
          },
          { responseType: "arraybuffer" }
        )
        .then(response => {
          console.log(response);
          if (response.status == "200") {
            const aLink = document.createElement("a");
            let blob = new Blob([response.data], {
              type: "application/vnd.ms-excel"
            });
            aLink.href = URL.createObjectURL(blob);
            aLink.download = "寻柜员管理表";
            aLink.click();
            document.body.appendChild(aLink);
          }
        });
    }
  },
  created() {
    this.search();
    this.findAll();
  },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.InspectorAdmin {
  width: 100%;
}
.ant-btn-primary,
.ant-btn-dashed {
  margin-right: 10px;
}
.key {
  color: rgb(98, 144, 255);
}
.del {
  color: red;
  cursor: pointer;
}
</style>
